<style>
  .search {
    padding-bottom: 14px;
    display: flex;
  }

  .color-cfcfcf {
    color: #CFCFCF;
    font-size: 12px;
    margin-bottom: 6px;
  }

  .search-text {
    background: rgba(249, 249, 249, 1);
    height: 34px;
    position: relative;
    width: 140px;
    border-radius: 4px;
  }

  .search-text span {
    position: absolute;
    top: 0;
  }

  .search-text input {
    width: 100%;
    height: 100%;
    background: none;
    border: 0;
    outline: medium;
  }

  .div-item {
    display: flex;
    margin-bottom: 12px;
  }

  .div-item p {
    display: flex;
    width: 110px;
    align-items: center;
  }

  .div-item input {
    width: 156px;
  }

  .div-item-S {
    box-shadow: 0 0 4px rgba(214, 214, 214, .75) inset;
    border: 1px solid #e5e5e5;
  }

  .hl-radio-container .item {
    margin-right: 40px;
  }

  .page_header {
    box-sizing: border-box;
    height: 56px;
    border-bottom: 1px solid #e5e5e5;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  .page_header>div>span {
    font-size: 16px;
    font-weight: bolder;
    margin-right: 51px;
    cursor: pointer;
  }

  .cost-item {
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0px 0px 6px 0px rgba(166, 166, 166, 0.5);
  }

  .cost-item-title {
    line-height: 40px;
    text-indent: 20px;
    font-size: 14px;
  }

  .cost-item-box {
    padding: 15px 26px;
    background: #F7F7F7;
  }

  .cost-item-cont {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    box-shadow: 0px 0px 4px 0px rgba(214, 214, 214, 0.75) inset;
  }

  .cost-item-cont>ul {
    color: #A5AAB7;
    line-height: 39px;
    text-align: center;
    font-size: 14px;
    display: flex;
  }

  .cost-item-cont>ul:first-child {
    border: 1px solid #f2f2f2;
  }

  .cost-item-cont>ul>li {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hl-radio-container .item {
    margin: 0;
  }

  .hl-radio-container .item {
    margin-right: 30px;
  }
  .hl-radio-container .item:last-child {
    margin-right: 0px;
  }

  .cost-item-cont input {
    margin: 0 8px;
  }
  .hllayer-confirm .mes{
    flex-direction: column;
  }
  .dialog-up{
    font-size: 14px;
    color: #666;
  }
  .dialog-down{
    font-size: 12px;
    color: #ccc;
  }
</style>

<section id="costItemIndex" class="pl-24 pr-24">
  <div class="page_header">
    <div>
      <span @click="switchMenu('fx')" :class="menuType == 'fx'?'color-666':'color-999'">费项配置</span>
      <span v-if="quanxian.indexOf('c361') > -1" @click="switchMenu('znj')" :class="menuType == 'znj'?'color-666':'color-999'">滞纳金配置</span>
    </div>
    <div @click="newAddCost" v-if="quanxian.indexOf('c16') > -1 && menuType == 'fx'">
      <hl-button type="outline">新增费项</hl-button>
    </div>
    <div @click="checkSaveFun" v-if="quanxian.indexOf('c362') > -1 && menuType == 'znj'">
      <hl-button size="mini">保存</hl-button>
    </div>
  </div>

  <!-- 费项模块 -->
  <div v-show="menuType == 'fx'">
    <div class="search">
      <div class="mr-10">
        <p class="color-cfcfcf">信息检索</p>
        <div class="global_search">
          <span class="icon-Gm-search"></span>
          <input v-model="keyword" autocomplete="off" type="text" class="global_ipt_text" placeholder="费项名称"
            style="width:220px" />
        </div>
      </div>
      <div class="mr-10">
        <p class="color-cfcfcf">费项类型</p>
        <div class="search-text">
          <hl-select :data="typeList" v-model="searchTypeSelect" :width="140"></hl-select>
        </div>
      </div>
      <div class="dy-flex" style="align-items: flex-end;">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>

    <div class="cost-list js-operation text-center line-height-45 br-4 global_table" style="border:1px solid #E5E5E5;">
      <div class="dy-flex color-666 font-nm color-gray border-b global_table_title" style="margin:0">
        <div class="dy-fx-1 plr-2 ellipsis-1">序号</div>
        <div class="dy-fx-2 plr-2 ellipsis-1">费项名称</div>
        <div class="dy-fx-4 plr-2 ellipsis-1">说明</div>
        <div class="dy-fx-2 plr-2 ellipsis-1">费项类型</div>
        <div class="dy-fx-2 plr-2 ellipsis-1">单位</div>
        <div class="dy-fx-2 plr-2 ellipsis-1">税率</div>
        <div class="dy-fx-1 plr-2 ellipsis-1">状态</div>
        <div class="dy-fx-2 plr-2 ellipsis-1 border-l">操作</div>
      </div>
      <div class="cost-content js-edit css-overflow">
        <div class="dy-flex cost-list-item global_table_item" v-for="(item, index) in data">
          <div class="dy-fx-1 plr-2 ellipsis-1">{{index+1 | toDou}}</div>
          <div class="dy-fx-2 plr-2 ellipsis-1">{{item.name}}</div>
          <div class="dy-fx-4 plr-2 ellipsis-1">{{item.memo ? item.memo : '--'}}</div>
          <div class="dy-fx-2 plr-2 ellipsis-1">{{item.type | lateState}}</div>
          <div class="dy-fx-2 plr-2 ellipsis-1">{{item.unitsVal?item.unitsVal:'--'}}</div>
          <div class="dy-fx-2 plr-2 ellipsis-1">{{item.taxFee?item.taxFee:'--'}}%</div>
          <div class="dy-fx-1 plr-2 ellipsis-1">{{item.valid | czState}}</div>
          <div class="dy-fx-2 cost-css-w-2 plr-2 ellipsis-1 border-l">
            <a v-if="item.valid == 'N'" class="js-access-control js-state cursor" data-control="c18" style="margin:0"
              @click="czValid(item.id, 'Y')">启用</a>
            <a v-if="item.valid == 'Y'" class="js-access-control js-state cursor" data-control="c18" style="margin:0"
              @click="czValid(item.id, 'N')">停用</a>
            <a class="js-access-control js-edit cursor" data-control="c17" style="margin:0"
              @click="editCostItem(item.id, false)">编辑</a>
          </div>
        </div>
      </div>
    </div>

    <div class="user-page ptb-10 clearfix">
      <div class="pull-left user-page-num">
        <span class="font-14">共<i>{{totalCount}}</i>条记录</span>
        <span>每页<hl-select :data="pageNums" v-model="limit" width="80" @on-change="turnPage"></hl-select>条</span>
      </div>
      <div class="pull-right">
        <hl-pagination v-model="currentPage" :total="totalPage" @change="handlePageChange"></hl-pagination>
      </div>
    </div>

    <!--新增编辑费项-->
    <div v-if="!flag" class="backdrop dy-flex" style="justify-content: center;align-items: center;">
      <div class="bg-fff relative br-4" style="width: 500px;">
        <div class="font-16 line-height-45 text-center">{{typeText}}费项</div>
        <div class="font-14 absolute icon-Gm-close text-center line-height-45 close"
          style="right: 0;top: 0;width: 45px;height: 45px;" @click="close"></div>
        <div style="background:rgba(249,249,249,1);padding: 15px 25px 20px 25px">
          <div class="dy-flex" style="border-bottom: 1px solid #E8E8E8;padding-bottom: 20px">
            <span style="margin-right: 10px">费项类型:</span>
            <hl-radio :data="typeList" v-model="newTypeSelect" v-if="typeText == '新增'" @on-click="handleClick"></hl-radio>
            <span v-if="typeText != '新增'">{{ newTypeSelect.join('') | lateState}}</span>
          </div>
          <div class="div-item" style="margin-top: 20px" v-if="newTypeSelect.join('') == 'S'">
            <p>费项名称:</p>
            <hl-select :data="sysCostList" :width="156" type="primary" v-model="newCostItem.type" @on-change="setName">
            </hl-select>
          </div>
          <div class="div-item" style="margin-top: 20px" v-if="newTypeSelect.join('') != 'S'">
            <p>费项名称:</p>
            <input type="text" class="form-control ct-number-ipt" v-model="newCostItem.name">
          </div>
          <div class="div-item" style="margin-top: 20px" v-if="newTypeSelect.join('') != 'S'">
            <p>计量单位:</p>
            <hl-select :data="unitList" :width="156" type="primary" v-model="newCostItem.unitsVal"
              @on-change="setunitsVal"></hl-select>
          </div>
          <div class="div-item">
            <p>税率:</p>
            <input type="text" class="form-control ct-number-ipt" v-model="newCostItem.rate">
            <p style="margin-left: 5px">%</p>
          </div>
          <!-- <div class="div-item">
            <p>默认滞纳金比例:</p><input type="text" class="form-control ct-number-ipt" v-model="newCostItem.lateFee">
            <p style="margin-left:5px;">%</p>
          </div> -->
          <div class="div-item" style="align-items: flex-start">
            <p>备注:</p><textarea placeholder="非必填" class="form-control contract-memo-textarea"
              style="width: 260px;height: 90px;" v-model="newCostItem.memo"></textarea>
          </div>
        </div>

        <div class="ptb-10 text-center">
          <hl-button v-if="typeText == '编辑'" type="primary" @on-click="editExpense">确认编辑</hl-button>
          <hl-button v-if="typeText == '新增'" type="primary" @on-click="createExpense">确认新增</hl-button>
        </div>
      </div>
    </div>
  </div>
  <!-- 滞纳金模块 -->
  <div v-show="menuType == 'znj'">
    <div class="cost-item" v-for="(item,index) in  data">
      <div class="cost-item-title color-666">{{item.name}}</div>
      <div class="cost-item-box">
        <div class="cost-item-cont">
          <ul>
            <li class="dy-fx-1 border-r">自动计算</li>
            <li class="dy-fx-2 border-r">起算日期</li>
            <li class="dy-fx-1 border-r">计算方式</li>
            <li class="dy-fx-1">滞纳金比例</li>
          </ul>
          <ul>
            <li class="dy-fx-1 border-r">
              <hl-radio :data="autoCal" v-model="item.lateFeeCalculateFlag"></hl-radio>
            </li>
            <li class="dy-fx-2 border-r">
              自收款日后<input type="number" class="form-control w-1" v-model="item.lateFeeCalculateDate"  @change="checkDate(item.lateFeeCalculateDate,index)"/> 天起算滞纳金
            </li>
            <li class="dy-fx-1 border-r">
              <hl-radio :data="calType" v-model="item.lateFeeCalculateMethod"></hl-radio>
            </li>
            <li class="dy-fx-1">
              <!-- <div class="dy-fx-2 plr-2 ellipsis-1">{{parseFloat(item.lateFee).toFixed(2)}}%</div> -->
              <input type="number" class="form-control w-1" v-model="item.lateFee" /> %
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="user-page ptb-10 clearfix">
      <div class="pull-left user-page-num">
        <span class="font-14">共<i>{{totalZnjCount}}</i>条记录</span>
        <span>每页<hl-select :data="pageZnjNums" v-model="limitZnj" width="80" @on-change="turnZnjPage"></hl-select>
          条</span>
      </div>
      <div class="pull-right">
        <hl-pagination v-model="currentZnjPage" :total="totalZnjPage" @change="handleZnjPageChange"></hl-pagination>
      </div>
    </div>
  </div>



</section>

<style>
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
</style>

<script src="modules/system_config/scripts/cost_item.js" charset="utf-8"></script>
